<template>
  <el-card header="参数信息">
    <avue-crud
      ref="avueRef"
      :page="page"
      :data="pageData?.data"
      :option="option"
      :table-loading="loading"
      @current-change="currentChange"
      @refresh-change="handleQuery"
    >
      <template #type="{ row }">
        {{ (row as DeviceLogModel).getDataTypeString() }}
      </template>

      <template #content="{ row }">
        <span :class="row.color">
          {{ (row as DeviceLogModel).getContentString() }}
        </span>
      </template>
    </avue-crud>
  </el-card>
</template>

<script setup lang="ts">
import { PageDataModel } from "@/model/page-data-model";
import options, { UserDeviceLogsSearch } from "./avue-options";
import DeviceAPI from "@/api/device";
import { DeviceLogModel } from "@/model/device-log-model";

defineOptions({
  name: "UserDeviceLogs",
});

const props = defineProps({
  sn: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "auto",
  },
});

const avueRef = ref();
const emits = defineEmits(["choosed"]);
const option: any = ref(options);
const pageData = ref<PageDataModel<DeviceLogModel>>();
const loading = ref(false);
const search = ref<UserDeviceLogsSearch>({
  sn: props.sn,
  page: 1,
  page_size: 12,
});
const page = computed(() => {
  return {
    ...pageData.value,
    layout: "total, prev, pager, next, jumper",
  };
});

onMounted(() => {
  handleQuery();
});

// 查询
async function handleQuery() {
  loading.value = true;
  DeviceAPI.getUserDeviceLogs(search.value)
    .then((res: PageDataModel<DeviceLogModel>) => {
      pageData.value = res;
      pageData.value.data = res.data.map((item) => new DeviceLogModel(item));
    })
    .finally(() => (loading.value = false));
}

/**
 * @description 分页切换
 * @param val  当前页码
 */
function currentChange(val: number) {
  search.value.page = val;
  handleQuery();
}
</script>

<style lang="scss" scoped>
.avue-crud {
  .info {
    color: #909399;
  }
  .danger {
    color: #f56c6c;
  }
  .warning {
    color: #e6a23c;
  }
  .success {
    color: #67c23a;
  }
  .primary {
    color: #409eff;
  }
}
</style>
